import React from 'react'
import { Icon, message, Menu, Avatar } from 'antd'

// import ColorPicker from '@/components/ColorPicker/index'

import { withRouter } from 'react-router-dom';

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

@withRouter
class MyHeader extends React.Component{
    constructor(props){
        super(props)
        let color = '#13C2C2'
        this.state = {
            isFullscreen: false,    //控制页面全屏
            color: color,
            infoVisible: false,     //控制修改用户信息的模态框
            passwordVisible: false   //控制修改密码的模态框
        }
    }
    render(){
        const {color,isFullscreen}=this.state
        const {user}=this.props;
        return(
            <div style={{ background: '#fff', padding: '0 16px' ,overflow:'hidden'}}>
                <Icon
                    style={{ fontSize: 18 }}
                    type={this.props.collapsed ? 'menu-unfold' : 'menu-fold'}
                    onClick={this.toggleCollapsed}
                />
                 <div style={styles.headerRight}>
                    <div style={styles.headerItem}>
                        {/* <ColorPicker color={color} onChange={this.changeColor} /> */}
                        ColorPickerssss
                    </div>
                    <div style={styles.headerItem}>
                        {/* <MyIcon type={theme === 'dark' ? 'icon-yueliang1' : 'icon-taiyang'} style={{ fontSize: 24 }} onClick={this.changeTheme}/> */}
                        {/* <img width={24} src={require(`../../assets/images/${theme}.svg`)} alt='' onClick={this.changeTheme} /> */}
                        MyIcon
                    </div>
                    <div style={styles.headerItem}>
                        <Menu mode="horizontal" selectable={false}> 
                            <SubMenu title={<div style={styles.avatarBox}><Avatar size='small' src="" />&nbsp;<span>wencs</span></div>}>
                                <MenuItemGroup title="用户中心">
                                    <Menu.Item key={1}><Icon type="user" />编辑个人信息</Menu.Item>
                                    <Menu.Item key={77} ><Icon type="edit" />修改密码</Menu.Item>
                                    <Menu.Item key={2} ><Icon type="logout" />退出登录</Menu.Item>
                                </MenuItemGroup>
                                <MenuItemGroup title="设置中心">
                                    <Menu.Item key={3} ><Icon type={isFullscreen ? 'fullscreen-exit' : 'fullscreen'} />切换全屏</Menu.Item>
                                    <Menu.Item key={4} ><Icon type="ant-design" />恢复默认主题</Menu.Item>
                                </MenuItemGroup>
                            </SubMenu>
                        </Menu> 
                    </div>
                 </div>
            </div>
        )
    }
}
const styles = {
    headerRight: {
        float: 'right',
        display: 'flex',
        height: 64,
        marginRight: 50
    },

    headerItem: {
        display: 'flex',
        alignItems: 'center',
        padding: '0 20px'
    },
    avatarBox: {
        display: 'flex',
        alignItems: 'center',
    }
}

export default MyHeader;